<template>
  <h1>Hello Vue3</h1>
  <h2>{{ money }}</h2>
  <h2>{{ obj }}</h2>
  <Son :obj="obj" bb="哈哈" :money="money" @huaqian="huaqianFn"></Son>
</template>

<script>
import { reactive, ref } from 'vue'
/* 
  目标：子传父

  情况1：复杂类型数据 reactive
    传递 reactive 对象给子组件，子组件对象属性修改，父组件能同步更新。
  
  情况2：普通类型的数据 ref
    普通类型的数据，还是需要通过 emit 配合 自定义事件的写法实现

*/
import Son from './components/Son.vue'
export default {
  name: 'App',
  components: { Son },
  setup() {
    console.log('setup组合API的起点')

    // 情况1：复杂类型数据 reactive
    const obj = reactive({
      name: '小白',
      age: 18,
    })

    // 情况2：普通类型的数据 ref
    const money = ref(1000)
    // 扣款逻辑还是在父组件上，孩子负责调用这个函数
    const huaqianFn = val => {
      money.value -= val
    }

    return { obj, money, huaqianFn }
  },
}
</script>

<style></style>
